<!DOCTYPE html>
<html><head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 精灵</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css">
</head>
<body>
	<div id="header-background"> </div>
	<div id="page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png"> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id="doc-nav">
		<ul id="doc-level-one">
			<li>
				Topics
				<ul>
					<li>
						<a href="../documentation/">
							文档
						</a>
					</li>
					<li>
						<a href="../documentation/entities.html">
							实体
						</a>
					</li>
					<li>
						<a href="../documentation/events.html">
							事件
						</a>
					</li>
					<li>
						<a href="../documentation/components.html">
							组件
						</a>
					</li>
					<li>
						<a href="../documentation/2d.html">
							2D绘图
						</a>
					</li>
					<li>
						<a href="../documentation/text.html">
							文本
						</a>
					</li>
					<li>
						<a href="../documentation/keyboard.html">
							键盘
						</a>
					</li>
					<li>
						<a href="../documentation/mouse.html">
							鼠标
						</a>
					</li>
					<li>
						<a href="../documentation/sound.html">
							声音
						</a>
					</li>
					<li>
						<a href="../documentation/sprites.html">
							精灵
						</a>
					</li>
					<li>
						<a href="../documentation/scenes.html">
							场景
						</a>
					</li>
					<li>
						<a href="../documentation/gameloop.html">
							游戏循环
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="doc-content" class="markdown">
		

		<h2> 精灵 </h2>
<p>精灵序列是包含多个游戏图像的图片文件。</p>
<p>这个例子我们使用公网文件 <a href="http://opengameart.org/content/glitch-sprite-assets-huge-collection">Glitch assets collection</a>。感谢 Tiny Speck 开放他们的资源! 这里我们将要用到这些图片:</p>
<p><img src="../images/glitch_walker.png" width="416" height="114"></p>
<p>在这种情况下，它描述了单个动画的多个帧，但精灵序列结合许多不同的动画是很常见的。</p>
<h2 id="loading-sprite-sheets">加载精灵序列</h2>
<p>我们使用精灵序列之前不仅要加载他们, 而且要指定每一个精灵的位置。你可以使用 <a href="../api/Crafty-loader.html"><code>Crafty.load</code></a> 完成这一步。</p>
<pre><code><span class="hljs-keyword">var</span> assetsObj = {
    <span class="hljs-string">"sprites"</span>: {
        <span class="hljs-comment">// This spritesheet has 16 images, in a 2 by 8 grid</span>
        <span class="hljs-comment">// The dimensions are 832x228</span>
        <span class="hljs-string">"glitch_walker.png"</span>: {
            <span class="hljs-comment">// This is the width of each image in pixels</span>
            tile: <span class="hljs-number">104</span>,
            <span class="hljs-comment">// The height of each image</span>
            tileh: <span class="hljs-number">114</span>,
            <span class="hljs-comment">// We give names to three individual images</span>
            map: {
                <span class="hljs-attr">walker_start</span>: [<span class="hljs-number">0</span>, <span class="hljs-number">0</span>]
                walker_middle: [<span class="hljs-number">7</span>, <span class="hljs-number">0</span>]
                walker_end: [<span class="hljs-number">7</span>, <span class="hljs-number">1</span>]
            }
        }
    }
};

Crafty.load(assetsObj, callback)</code></pre>
<p>有些精灵序列在每个精灵或整个图片周围有空白。你可以使用 <code>paddingX</code>, <code>paddingY</code>, 和 <code>paddingAroundBorder</code> 字段来指定。</p>
<h2 id="static-sprites">静态精灵</h2>
<p>要使用静态精灵，我们参考前面定义的映射。Crafty 将有自动生成的组件与这些名称，添加 <a href="../api/Sprite.html">"Sprite"</a> 组件到场景。</p>
<pre><code><span class="hljs-comment">// This will display the image associated with walker_start</span>
<span class="hljs-comment">// It automatically gets the dimensions of that image: 104x114</span>
<span class="hljs-keyword">var</span> actual_size = Crafty.e(<span class="hljs-string">"2D, Canvas, walker_start"</span>)
    .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">10</span>});

<span class="hljs-comment">// An image from a different part of the sprite sheet</span>
<span class="hljs-comment">// Here we scale it to half size</span>
<span class="hljs-keyword">var</span> small_sprite = Crafty.e(<span class="hljs-string">"2D, Canvas, walker_middle"</span>)
    .attr({<span class="hljs-attr">x</span>:<span class="hljs-number">150</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">10</span>, <span class="hljs-attr">w</span>:<span class="hljs-number">52</span>, <span class="hljs-attr">h</span>:<span class="hljs-number">57</span>})</code></pre>
<h2 id="animating-sprites">精灵动画</h2>
<p>你可以使用 <a href="../api/SpriteAnimation.html">"SpriteAnimation"</a> 组件把上边的精灵做成一个动画。</p>
<pre><code><span class="hljs-keyword">var</span> walker = Crafty.e(<span class="hljs-string">'2D, Canvas, walker_start, SpriteAnimation'</span>);</code></pre>
<p>动画是通过定义和播放帧序列来实现的。要定义帧动画, 调用 <code>reel</code> 方法并传递一个名字,一个持续时间,和一个帧序列. 在这里我们定义了一个称为 "walking"  的帧动画，它将持续1秒，并按照我们的希望,顺序地显示16个帧:</p>
<pre><code>walker.reel(<span class="hljs-string">"walking"</span>, <span class="hljs-number">1000</span>, [
    [<span class="hljs-number">0</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">1</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">2</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">3</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">4</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">5</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">6</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">7</span>, <span class="hljs-number">0</span>],
    [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">2</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">3</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">4</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">5</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">6</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">7</span>, <span class="hljs-number">1</span>]
])</code></pre>
<p>然后，要运行动画，你只需要简单的调用 <code>animate</code> 方法就可以启动它！这个方法需要传递两个参数: 帧序列的名字,和一个播放时间，如果要无限的播放下去，那就传 <code>-1</code>:</p>
<pre><code>walker.animate(<span class="hljs-string">"walking"</span>, <span class="hljs-number">-1</span>)</code></pre>
<p>最后，我们把这个完整的例子运行在 jsbin，我们的精灵将在里边行走：
<iframe class="" id="" style="border: 1px solid rgb(170, 170, 170); width: 100%; min-height: 300px; height: 30px;" data-url="http://jsbin.com/reneji/1/embed?js,output" src="http://jsbin.com/reneji/1/embed?js,output"></iframe><script src="http://static.jsbin.com/js/embed.js"></script></p>
<p>试着在 <code>go()</code> 后边增加 <code>walker.animationSpeed = 2</code> !</p>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png">
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png">
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png">
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			© Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>


</body></html>